
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    <title></title>
    <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <link href="css/table.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 1000px;overflow: auto">
<div class="news_main">

    <div class="l_left news_left">

        <h6>区域目录</h6>
        <div class="tree_left_top">
            <div class=" order_ztree l_left organize_ztree" style="width: 100%">
                <p><ul id="treeDemo" class="ztree"  style=" overflow:auto;margin-left: 20px"></ul></p>
            </div>
        </div>
    </div>
    <div class="l_left news_right">
        <h6>灯箱实时监控</h6>
        <div class="notice_check">

              <p>

                  <label>灯具名称：</label><input type="text" class="find_input">
                  <label>灯具类型：</label><select class="find_input"></select>
                  <button class="check_btn">查询</button>
              </p>


        </div>
        <div class="clear"></div>

        <div class="notice_check">
            <div class="notice_nav  paddingBotme">
                <P>
<!--                <a class="btn btn-default" onclick="add()"><span class="glyphicon glyphicon-plus"></span>新增</a>-->
<!--                <a class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>删除</a>-->
                    <button id="queryBad"  class="btn btn-default" ><span class="glyphicon glyphicon-plus"></span>故障设备查询</button>
                </P>
            </div>
        </div>
            <div class="clear"></div>

        <ul class="news_table department_table">
            <li>
                <table id="table" class="table_style" style="margin: 0 auto" ></table>
            </li>
        </ul>

    </div>
    <div class="clear"></div>

</div>
<script src="js/jquery/jQuery-2.2.0.min.js"></script>
<script src="js/bstable/js/bootstrap.min.js"></script>
<script src="js/bstable/js/bootstrap-table.js"></script>
<script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.exedit-3.5.js"></script>
<script src="js/layer_v2.1/layer/layer.js"></script>
<script src="js/localLight.js"></script>

<script>
    $(function () {
        $("#queryBad").click(function(){
alert("进入了 $(\"#queryBad\").click(function()方法");
            $('#table').bootstrapTable({

                 //  ajax:function(request){
                 // //     alert(request);//使用ajax请求
                 //    $.ajax({
                 //        url: "/queryBad",
                 //        contentType:'application/json;charset=utf-8',
                 //        dataType:'json',
                 //        data:request.data,
                 //        success:function (res) {
                 //            request.success({
                 //                row:res.data,
                 //            });
                 //            $('#table').bootstrapTable('load', res.data);
                 //        },
                 //        error:function(error){
                 //            console.log(error);
                 //        }
                 //    })
                 // },



                method: "get",
                striped: true,
                singleSelect: false,
                url: "/queryBad",
                dataType: "json",
                pagination: true, //分页
                pageSize: 10,
                pageNumber: 1,
                search: false, //显示搜索框
                contentType: "application/x-www-form-urlencoded",
                queryParams:null,
                columns: [
                    {
                        checkbox: "true",
                        field: 'check',
                        align: 'center',
                        valign: 'middle'
                    }
                    ,
                    {
                        title: "灯具名称",
                        field: 'name',
                        align: 'center',
                        width: 160,
                        valign: 'middle'
                    },
                    {
                        title: "灯具类型",
                        field: 'type',
                        align: 'center',
                        width: 80,
                        valign: 'middle'
                    },
                    {
                        title: '控制器地址',
                        field: 'url',
                        align: 'center',
                        width: 120,
                        valign: 'middle'
                    },
                    {
                        title: '在线状态',
                        field: 'status',
                        width: 70,
                        align: 'center',
                        formatter: function (cellval, row) {
                            if (cellval =='设备损坏'){
                                return '<div  style="color:red">'+cellval+'</div>';
                            } else  if (cellval =='正常'){
                                return '<div  style="color:green">'+cellval+'</div>';
                            }else {
                                return cellval;
                            }}
                    },
                    {
                        title: '开关状态',
                        field: 'status01',
                        width: 70,
                        align: 'center',
                        formatter: function (cellval, row) {
                            if (cellval =='可用'){
                                return '<div  style="color:#ff6b29">'+cellval+'</div>';
                            } else  if (cellval =='不可用'){
                                return '<div  style="color:#bebebe">'+cellval+'</div>';
                            }else {
                                return cellval;
                            }}
                    },
                    {
                        title: '电流',
                        field: 'low',
                        align: 'center',
                        width: 120,
                        valign: 'middle'
                    },
                    {
                        title: '电压',
                        field: 'light',
                        align: 'center',
                        width: 120,
                        valign: 'middle'
                    }

                    // {
                    //     title: '操作',
                    //     field: 'person',
                    //     width: 120,
                    //     align: 'center',
                    //     formatter: function (cellval, row) {
                    //         var  e = '<button  id="add" data-id="98" class="btn btn-xs btn-success" onclick="add(\'' + row.id + '\')">编辑</button> ';
                    //
                    //         var  d = '<button  id="add" data-id="98" class="btn btn-xs btn-danger" onclick="del(\'' + row. + '\')">删除</button> ';
                    //         return  e + d;
                    //     }
                    // }

                ]
            });


        })



        $('#table').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "/queryAllLamp",
            dataType: "json",
            pagination: true, //分页
            pageSize: 10,
            pageNumber: 1,
            search: true, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams:true,
            columns: [
                {
                    checkbox: "true",
                    field: 'check',
                    align: 'center',
                    valign: 'middle'
                }
                ,
                {
                    title: "灯具名称",
                    field: 'name',
                    align: 'center',
                    width: 160,
                    valign: 'middle'
                },
                {
                    title: "灯具类型",
                    field: 'type',
                    align: 'center',
                    width: 80,
                    valign: 'middle'
                },
                {
                    title: '控制器地址',
                    field: 'url',
                    align: 'center',
                    width: 120,
                    valign: 'middle'
                },
                {
                    title: '在线状态',
                    field: 'status',
                    width: 70,
                    align: 'center',
                    formatter: function (cellval, row) {
                        if (cellval =='设备损坏'){
                            return '<div  style="color:red">'+cellval+'</div>';
                        } else  if (cellval =='正常'){
                            return '<div  style="color:green">'+cellval+'</div>';
                        }else {
                            return cellval;
                        }}
                },
                {
                    title: '开关状态',
                    field: 'status01',
                    width: 70,
                    align: 'center',
                    formatter: function (cellval, row) {
                        if (cellval =='可用'){
                            return '<div  style="color:#ff6b29">'+cellval+'</div>';
                        } else  if (cellval =='不可用'){
                            return '<div  style="color:#bebebe">'+cellval+'</div>';
                        }else {
                            return cellval;
                        }}
                },
                {
                    title: '电流',
                    field: 'low',
                    align: 'center',
                    width: 120,
                    valign: 'middle'
                },
                {
                    title: '电压',
                    field: 'light',
                    align: 'center',
                    width: 120,
                    valign: 'middle'
                }

                // {
                //     title: '操作',
                //     field: 'person',
                //     width: 120,
                //     align: 'center',
                //     formatter: function (cellval, row) {
                //         var  e = '<button  id="add" data-id="98" class="btn btn-xs btn-success" onclick="add(\'' + row.id + '\')">编辑</button> ';
                //
                //         var  d = '<button  id="add" data-id="98" class="btn btn-xs btn-danger" onclick="del(\'' + row. + '\')">删除</button> ';
                //         return  e + d;
                //     }
                // }

            ]
        });
    });
    function del(id) {
       $.ajax({
           url:"/delLamp",
           data:{"id":id},
           dataType: "text",
           success:function (data) {
                if (data=='1'){
                    alert("删除成功"+id);
                }else{
                    alert("不好意思操作失败");
                }
           }

       })

    }

    function change(){
        $(".dropdown-menu>li").click(function(){
            $(".change").html($(this).html())
        })
    }
    function add(){
        layer.open({
            type: 2,
            title: '添加详情',
            shadeClose: true,
            shade: 0.5,
            skin: 'layui-layer-rim',
            closeBtn:1,
            area: ['1100px', '600px'],
            content: 'controlLightTail.html'
        });
    }
    function data() {
        var Name = "监控数据";
        var Href = "setData.html";
        var data_id = $("#add").attr('data-id');
        window.parent.$.learuntab.myAddTab(Name, Href, data_id);
    }
    function queryBad() {
        alert("进入了queryBad方法");


        $('#table').bootstrapTable({
            ajax:function(request){                    //使用ajax请求
                $.ajax({
                    type:"GET",
                    url: "/queryBad",
                    contentType:'application/json;charset=utf-8',
                    dataType:'json',
                    data:request.data,
                    success:function (res) {
                        alert(res);
                        request.success({
                            row:res.data,
                        });
                        $('#table-request').bootstrapTable('load', res.data);
                    },
                    error:function(error){
                        console.log(error);
                    }
                })
            },



            method: "get",
            striped: true,
            singleSelect: false,
            url: "/queryBad",
            dataType: "json",
            pagination: true, //分页
            pageSize: 10,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams:null,
            columns: [
                {
                    checkbox: "true",
                    field: 'check',
                    align: 'center',
                    valign: 'middle'
                }
                ,
                {
                    title: "灯具名称",
                    field: 'name',
                    align: 'center',
                    width: 160,
                    valign: 'middle'
                },
                {
                    title: "灯具类型",
                    field: 'type',
                    align: 'center',
                    width: 80,
                    valign: 'middle'
                },
                {
                    title: '控制器地址',
                    field: 'url',
                    align: 'center',
                    width: 120,
                    valign: 'middle'
                },
                {
                    title: '在线状态',
                    field: 'status',
                    width: 70,
                    align: 'center',
                    formatter: function (cellval, row) {
                        if (cellval =='设备损坏'){
                            return '<div  style="color:red">'+cellval+'</div>';
                        } else  if (cellval =='正常'){
                            return '<div  style="color:green">'+cellval+'</div>';
                        }else {
                            return cellval;
                        }}
                },
                {
                    title: '开关状态',
                    field: 'status01',
                    width: 70,
                    align: 'center',
                    formatter: function (cellval, row) {
                        if (cellval =='可用'){
                            return '<div  style="color:#ff6b29">'+cellval+'</div>';
                        } else  if (cellval =='不可用'){
                            return '<div  style="color:#bebebe">'+cellval+'</div>';
                        }else {
                            return cellval;
                        }}
                },
                {
                    title: '电流',
                    field: 'low',
                    align: 'center',
                    width: 120,
                    valign: 'middle'
                },
                {
                    title: '电压',
                    field: 'light',
                    align: 'center',
                    width: 120,
                    valign: 'middle'
                }

                // {
                //     title: '操作',
                //     field: 'person',
                //     width: 120,
                //     align: 'center',
                //     formatter: function (cellval, row) {
                //         var  e = '<button  id="add" data-id="98" class="btn btn-xs btn-success" onclick="add(\'' + row.id + '\')">编辑</button> ';
                //
                //         var  d = '<button  id="add" data-id="98" class="btn btn-xs btn-danger" onclick="del(\'' + row. + '\')">删除</button> ';
                //         return  e + d;
                //     }
                // }

            ]
        });

    }
</script>
</body>
</html>
